{% load comment_tags %}
<div class="comments">
  <h3 class="comment-title">
    评论({% get_comment_count article.id %})
  </h3>
  <form id="comment-form">
    {% csrf_token %}
    <textarea name="content" rows="4"></textarea>
    <div class="operation">
      <span class="rep-to"></span>
      <a class="cancel">取消评论</a>
      <a class="submit">评论</a>
    </div>
    <div class="comment-author-wrap">
      <div class="comment-inp author">
        <label for="author">昵称(必填)</label>
        <input type="text" id='author' data-id="{{ article.pk }}" name='author' placeholder="昵称">
        <p class="comment-tips">{{ author.msg }}</p>
      </div>
      <div class="comment-inp email">
        <label for="email">邮箱(必填)</label>
        <input type="text" id='email' name='email' placeholder="邮箱">
        <p class="comment-tips">{{ email.msg }}</p>
      </div>
      <div class="comment-inp url">
        <label for="url">网址</label>
        <input type="text" id='url' name='url' placeholder="网址">
        <p class="comment-tips">{{ url.msg }}</p>
      </div>
      <input type="hidden" class='parent-id' name='parent' value="0">
    </div>
  </form>
  <ul class="comment-list">
    {% get_parent_comments article.id as comment_list %}
    {% for comment in comment_list %}
      <li class="comment-item" data-comment-id="{{ comment.pk }}" id="comment-{{ comment.id }}">
        <div class="parent-comment">
          <img src="{{ comment.email|gravatar_url }}" alt="{{ comment.name }}" class="avatar">
          <div class="comment-content">
            <div class="header">
              <span class="user">
                <a href="{{ comment.url }}">{{ comment.nickname }}</a>
              </span>
              <span class="addr">{{ comment.ip_address }}</span>
              <span class="browser">{{ comment.browser }}</span>
              <time>{{ comment.created_time|date:'Y-m-d' }}</time>
              <a href="#comment-form" class="reply">回复</a>
            </div>
            <p>{{ comment.content }}</p>
          </div>
        </div>
        <ul>
          {% get_child_comments comment as child_comments %}
          {% for child_comment in child_comments %}
            <li class="child-comment" id="comment-{{ child_comment.id }}">
              <img src="{{ child_comment.email|gravatar_url }}" alt="{{ child_comment.name }}" class="avatar">
              <div class="comment-content">
                <div class="header">
                  <span class="user">
                    <a href="{{ child_comment.url }}">
                      {{ child_comment.nickname }}
                    </a>
                  </span>
                  <span class="addr">{{ child_comment.ip_address }}</span>
                  <span class="browser">{{ child_comment.browser }}</span>
                  <time>{{ child_comment.created_time|date:'Y-m-d' }}</time>
                  <a href="#comment-form" class="reply">回复</a>
                </div>
                <p>{{ child_comment.content }}</p>
              </div>
            </li>
          {% endfor %}
        </ul>
      </li>
    {% empty %}
      <li>暂无评论</li>
    {% endfor %}
  </ul>
</div>